<template>
    <div class="app-intro">
        <div class="head">
             <img  :src="couimg"/>
            <div class="miaoshu">
                <div class="title">
                    <div class="ltitle">{{couname}}</div>
                    <div class="count">
                        <p>
                        {{cstudy}} 学习&nbsp;&nbsp;
                        <i v-if="likeflag===false" class="iconfont icon-zan"  @click="like"></i>
                        <i v-else class="iconfont icon-zan" style="color:blue" @click="delike"></i>
                        {{zannum}}
                        </p>
                       

                    </div>
                    
                </div>
                <div class="jianjie">
                    <div v-if="flag===false"><el-button  class="addbut" @click="addcourse">添加课程</el-button><br></div>
                    <div v-else><el-button class="addbut" @click="exitCourse">退出课程</el-button><br></div>
                    课程简介：{{couintro}}
                </div>
            </div>
        </div>
        <div class="body">
            <div class="left">
                <h1>课时</h1>
                <ul>
                    <li v-for="item in lessList" :key="item.id">
                        {{item.title}}
                        <RouterLink :to="`/lessondetail/${item.id}`">开始学习</RouterLink>
                        
                    </li>
                    
                </ul>
                

            </div>
           <div class="right">
                <div class="tea-box">
                    <h2>授课教师</h2>
                    <div class="tea-infor">
                        <el-avatar :size="50" :src="tesrc"></el-avatar>
                        <div class="teaname">
                            <span>{{tename}}</span>
                           
                        </div>
                    </div>
                   
                    <p>邮箱：{{teemail}}</p>

                </div>

            </div>
        </div>
        
    </div>
</template>
<script setup>
import {onMounted, ref} from 'vue'
import {useRoute} from 'vue-router'
import {addlessonAPI} from '../../apis/course'
import {findUserAPI} from '@/apis/home'
import {getCourseIntro} from '../../apis/course'
import {getTeaById} from '../../apis/course'
import {getLessonAPI} from '../../apis/course'
import {addStudentAPI} from '../../apis/course'
import {studyflagAPI} from '../../apis/course'
import {exitCourseAPI} from '../../apis/course'
import {likeFlagAPI} from '../../apis/course'
import {likeCourse} from '../../apis/course'
import {delikeCourse} from '../../apis/course'
const tename = ref('')
const teemail = ref('')
const tesrc = ref('')
const teid = ref('')

const couname = ref('')
const couintro = ref('')
const couimg = ref('')
const cstudy = ref('')
const zannum = ref()


const route = useRoute()
const dialogFormVisible = ref(false)
const lessonname = ref('')
const courseid = route.params.id

const lessList = ref([])

const likeflag = ref()
const flag = ref('')
onMounted(()=>{
    getcourse().then(res=>{
        findTeacher()
    }),
     getLessonList(),
     studyflag(),
     likeOr()
})

const getcourse = async()=>{
    const res = await getCourseIntro(courseid)
    couname.value = res.data.name
    couintro.value =res.data.description
    couimg.value = res.data.img
    cstudy.value = res.data.studiedNumber
    zannum.value = res.data.likeNumber
    teid.value = res.data.teacherId
 
}
const findTeacher = async()=>{
    try { 
        console.log("teid"+teid.value)
        const id = teid.value
        const res = await getTeaById(id);
        tename.value = res.data.data.name
        tesrc.value = res.data.data.avatar
        teemail.value = res.data.data.email
        return res;
        
    } catch (error) {
        console.error(error);
    }
}


const getLessonList = async()=>{
    const res = await getLessonAPI(courseid)
    lessList.value = res.data
    console.log(lessList.value)
 
}

const addcourse = async()=>{
    await addStudentAPI(courseid)
    location.reload()
}


const studyflag = async()=>{
    const res = await studyflagAPI(courseid)
    flag.value = res.data
  
}


// 退出课程
const exitCourse = async()=>{
    await exitCourseAPI(courseid)
    location.reload()
}

// 点赞课程
const like = async()=>{
    
    await likeCourse(courseid)
    location.reload()
    
}
const delike = async()=>{
    await delikeCourse(courseid)
    location.reload()
}
// 判断是否点赞
const likeOr = async()=>{
    const res = await likeFlagAPI(courseid)
    likeflag.value = res.data
}
</script>
<style scoped>
.app-intro{
    
    width: 1100px;
    margin: 0 auto;
    margin-bottom: 20px;
}
.head{
    margin-top: 30px;
    width: 1100px;
    display: flex;
    padding-bottom: 20px;
    border-bottom: 1px solid #000;
    margin-bottom: 20px;
}
img{
    width: 400px;
    height: 180px;
}
.miaoshu{
    margin-left: 20px;
    flex:1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
}
.miaoshu .title{
    font-size: 30px;
    
}
.miaoshu .jianjie{
    font-size: 18px;
}
.title{
    display: flex;
    justify-content: space-between;
}
.count{
    margin-right: 20px;
}
.icon-zan{
    font-size: 26px;
}
.body{
    display: flex;
}
.left{
    flex:1;
    background-color: #fff;
    margin-right: 20px;
    border-radius: 5px;
    border:1px solid #d6c8c8;
    padding: 20px;
}
.right{
    width: 300px;
    height: 300px;
    background-color: #fff;
    border-radius: 5px;
    border:1px solid #d6c8c8;
}
.tea-box h2{
    padding: 10px 15px;
    font-weight: normal;
}
.tea-infor{
    padding: 20px;
    display: flex;
    
}
.teaname{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding-left: 16px;
}
.tea-box p{
    margin-left: 20px;
    margin-top: 10px;
}
/* .left img{
    width: 600px;
    height: 400px;
} */
ul{
    list-style: none;
}
ul li{
    font-size: 18px;
    margin-left: 10px;
}

.addbut{
    margin-bottom: 10px;
}
i{
    cursor: pointer;
}
</style>